<template>
  <div class="nav_wrap">
    <div class="logo">
      <img src="../assets/image/logo.0940ebb5.png" alt="" />
    </div>
    <div class="nav">
      <ul>
        <li @click="$router.push('/layout')">首页</li>
        <li
          @click="turnInfo(item.id)"
          v-for="(item, index) in navList"
          :key="index"
        >
          {{ item.name }}
          <div class="sec">
            <div class="sec_list">
              <!-- 循环二级菜单 -->
              <div
                v-for="(secItem, ind) in item.children"
                :key="ind"
                class="sec_one"
                @click="turnCateDetail(secItem.id)"
              >
                <img :src="secItem.picture" alt="" />
                <p>{{ secItem.name }}</p>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="search">
      <i class="iconfont icon-aoteman"></i>
      <input type="text" />
      <div class="cart" @click="turnCart">
        <i class="iconfont icon-dalou"></i>
        <span>1</span>
      </div>
    </div>
  </div>
</template>
<script>
// 导入写好的获取 导航接口
import { _getIndexNav } from '../api/home'
export default {
  data () {
    return {
      navList: [] //导航数据
    }
  },
  created () {
    this.getNav() //调用接口方法
    console.log('88888888888888888888888888888888')
  },
  methods: {
    turnInfo (id) {
      this.$router.push({
        name: 'cateinfo',
        params: {
          id: id
        }
      })
    },
    //跳转分类详情 传送id
    turnCateDetail (id) {
      this.$router.push({
        name: 'catedetail',
        query: {
          id: id
        }
      })
    },
    turnCart () {
      this.$router.push('/layout/cart')
    },
    async getNav () {
      // 调用获取导航数据接口
      var res = await _getIndexNav()
      console.log(res)
      this.navList = res.data.result
      // 用eventBuS触发事件 传递数据
      this.$bus.$emit('sendnav', res.data.result)
    }
  }
}
</script>
<style lang="less" scoped>
.nav_wrap {
  width: 1240px;
  height: 132px;
  margin: 0 auto;
  background: white;
  display: flex;
  position: relative;
  justify-content: space-between;
  .logo {
    img {
      width: 200px;
      height: 132px;
    }
  }
  .nav {
    flex: 1;
    ul {
      width: 100%;

      display: flex;
      font-size: 18px;
      justify-content: space-around;
      > li {
        line-height: 132px;
        padding: 0 15px;
        .sec {
          width: 1240px;
          height: 150px;
          box-shadow: 0 -3px 3px black;
          background: white;
          position: absolute;
          display: none;
          top: 130px;
          z-index: 999;
          left: 0;
          .sec_list {
            display: flex;
            .sec_one {
              margin-left: 10px;
              line-height: 40px;
              img {
                width: 100px;
                height: 100px;
              }
              p {
                line-height: 30px;
              }
            }
          }
        }
        // 鼠标经过li 二级菜单显示
        &:hover {
          .sec {
            display: block;
          }
        }
      }
    }
  }
}
.search {
  width: 100px;
  height: 31px;
  display: flex;
  margin-top: 45px;
  input {
    width: 60px;
    border: none;
    border-bottom: 1px solid #e5e5e5;
  }
  .cart {
    position: relative;
    i {
      color: red;
    }
    span {
      position: absolute;
      padding: 2px 5px;
      border-radius: 50%;
      background: red;
      color: white;
      top: -10px;
      right: -10px;
    }
  }
}
</style>
